<template>
	<div class="con">
		<div class="header">
			<router-link to="/">
				<van-icon name="home-o"></van-icon>
			</router-link>

			<span>网易严选</span>
			<div>
				<router-link to="/search">
					<van-icon name="search"></van-icon>
				</router-link>
				<router-link to="/shopcart">
					<van-icon name="shopping-cart-o"></van-icon>
				</router-link>
			</div>
		</div>
		<van-form @submit="onSubmitRegister">
			<van-cell-group inset>
				<van-field
					v-model="username"
					name="手机号"
					label="手机号"
					placeholder="手机号"
					:rules="[
						{ required: true, message: '请填写注册手机号' },
						{ pattern, message: '手机号不合法，请重新输入' }
					]"
				/>
				<van-field
					v-model="password"
					type="password"
					name="密码"
					label="密码"
					placeholder="密码"
					:rules="[
						{ required: true, message: '请填写密码' },
						{ pattern: pattern2, message: '密码不合法，请重新输入' }
					]"
				/>
				<van-field
					v-model="passwordtwo"
					type="password"
					name="确认密码"
					label="确认密码"
					placeholder="确认密码"
					:rules="[{ validator, message: '请确认密码正确' }]"
				/>
				<div class="code">
					<van-field
						v-model="code"
						type="text"
						name="code"
						label="手机验证码"
						placeholder="验证码"
						:rules="[
							{ required: true, message: '请输入验证码' },
							{ pattern: pattern3, message: '密码不合法，请重新输入' }
						]"
					></van-field
					><van-button type="success" @click="getcode">获取验证码</van-button>
				</div>
			</van-cell-group>
			<div class="text">
				<van-field
					name="checkbox"
					label="同意网络安全协议!"
					label-width="60%"
					label-align="right"
				>
					<template #input>
						<van-checkbox v-model="checked" shape="square" />
					</template>
				</van-field>
			</div>

			<div style="margin: 16px">
				<van-button round block type="primary" native-type="submit">
					注册
				</van-button>
				<div class="foot" style="padding-right: 26px">
					<router-link to="/login">
						<span style="font-size: 10px">去登录... </span>
					</router-link>
				</div>
			</div>
		</van-form>
	</div>
</template>

<script lang="ts">
	import { defineComponent } from 'vue'
	export default defineComponent({
		name: 'Register'
	})
</script>

<script lang="ts" setup>
	import { showToast } from 'vant'
	import { ref } from 'vue'

	import { ReqGetcode, ReqRegister } from '@/api/user'
	import { useRouter } from 'vue-router'
	const router = useRouter()

	const username = ref('')
	const password = ref('')
	const passwordtwo = ref('')
	const code = ref('')
	const pattern =
		/^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
	const pattern2 = /^\w{6,21}$/
	const pattern3 = /^\d{6}$/
	const onSubmitRegister = (values: any) => {
		if (values.checkbox === false) {
			showToast('请同意相关协议')
			return
		}
		register()
	}

	const checked = ref(true)

	const validator = (val: any) => {
		if (val === password.value) return true
		return false
	}

	const getcode = async () => {
		try {
			let res = await ReqGetcode(username.value)
			code.value = res
		} catch (error) {
			showToast('获取验证码失败，请稍后再试')
		}
	}
	const register = async () => {
		const registerparmas = {
			phone: username.value,
			password: password.value,
			code: code.value
		}
		try {
			await ReqRegister(registerparmas)
			showToast('注册成功')
			router.push('/login')
		} catch (error) {
			showToast('注册失败')
			username.value = ''
			password.value = ''
			passwordtwo.value = ''
			code.value = ''
		}
	}
</script>

<style lang="scss" scoped>
	.con {
		height: 100%;
		background-color: #e0ece9;
		background-image: linear-gradient(180deg, #e0ece9 0%, #98e2ec 100%);
	}
	.header {
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 25px 0;
		.span {
			font-size: 20px;
		}
		margin-bottom: 3.13333rem;
	}
	.con {
		text-align: center;
		height: 100%;
		width: 100%;
	}

	.van-cell-group--inset {
		margin: 25px 15px;
		margin-top: 50px;
	}
	.text {
		font-size: 15px;
		margin: 15px 15px;
		color: red;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		border-radius: 50px;
	}
	.code {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-evenly;
	}
	.foot {
		display: flex;
		justify-content: end;
		flex-wrap: nowrap;
		align-items: center;
		padding-left: 0;
		margin: 10px 5px 0 0;
	}
</style>
